<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>系统配置信息</title>
  <%@ include file="/WEB-INF/view/common/includ-css.jsp" %>
</head>
<body class="gray-bg">
<div class="row wrapper border-bottom white-bg">
  <div class="col-sm-12">
    <div class="ibox float-e-margins" style="margin-bottom: 0px;">
      <div class="ibox-title">
        <h5>查询条件</h5>
        <div class="ibox-tools">
          <a class="collapse-link">
            <i class="fa fa-chevron-up"></i>
          </a>
        </div>
      </div>
      <div class="ibox-content">
        <form class="form-inline">
          <div class="form-group">
            <label class="font-normal">configKey：</label>
            <input type="text" id="configKey" name="configKey"/>
          </div>
          <div class="form-group">
            <label class="font-normal">remark：</label>
            <input type="text" id="remark" name="remark"/>
          </div>
          <input type="hidden" id="statusInput"/>
          <button type="button" class="btn btn-white btn-info btn-round" style="margin-bottom: 0px;" id="query">
            <i class="ace-icon fa fa-search bigger-120 blue"></i>查询
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="row wrapper border-bottom white-bg page-heading">
  <div class="col-sm-4">
    <h2>系统配置信息</h2>
  </div>
</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">

        <div class="ibox-content">
          <table id="dataTables" class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
              <th>key</th>
              <th>value</th>
              <th>备注</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<%@ include file="/WEB-INF/view/common/includ-js.jsp" %>
<!-- Data Tables -->
<script src="${path}/static/Hui/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${path}/static/Hui/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="${path}/static/plugins/layui/layui.all.js"></script>
<script>
  $(function(){

    // 关闭错误提示
    $.fn.dataTable.ext.errMode = 'none';

    // 数据表格
    var tables = $("#dataTables").dataTable({
      paging:true,
      serverSide: true,
      searching: false,
      ordering:  false,
      processing: false,
      "lengthMenu": [10, 20, 50, 100],
      pageLength: 50,
      lengthChange: true,
      "ajax":{
        url:"/sys/config/sys/list",
        type:"post",
        data: function (d) {
          d.configKey=$("#configKey").val(),
          d.remark=$("#remark").val();
        }
      },
      columns: [
        { "data": "configKey" },
        { "data": "configValue" },
        { "data": "remark" },
        { "data": "configKey" },
      ],
      columnDefs: [
        {
          "render": function(data, type, row, meta) {
            if(data!=null){
              if(data.length > 50){
                return data.substr( 0, 50 )+'...';
              }else{
                return data;
              }
            }
          },
          "targets": 1
        },
        {
          "render": function(data, type, row, meta) {
            var html = '<div class="action-buttons">';
            html += '<a href="javascript:void(0)" onclick="update(\'' + row.configKey + '\',\''+row.configValue+'\')" class="blue" title="修改"><i class="ace-icon fa fa-pencil bigger-130"></i>修改</a>';
            html += '<a href="javascript:void(0);" onclick="del(\'' + row.configKey + '\')" class="blue" title="删除"><i class="ace-icon fa fa-pencil bigger-130">删除</i></a>';
            html += '</div>';
            return html;
          },
          "targets": 3
        }
      ]
    });
    $("#query").click(function(){
      tables.dataTable().fnDraw();
    });

  });

  function del(configKey){
    var str = "是否删除当前配置";
    // 询问框
    layer.confirm(str, {
      btn: ['确定','取消']
    }, function(){
      $.ajax({
        type:"post",
        url:"${path}/sys/config/del",
        dataType:"json",
        data:{configKey:configKey,type:1},
        success:function(data){
          layer.close(index);
          if(data.code ==0){
            layer.alert(data.msg,{icon:1}, function(){
              location.reload();
            });
          }else{
            layer.alert(data.msg,{icon:2});
          }
        },
        error:function (data) {
          layer.close(index);
        }
      });
    });
  }
  function update(configKey,configValue){
    layer.open({
      type: 1,
      shade: 0.8,
      offset: 'auto',
      shadeClose: true,//点击外围关闭弹窗
      scrollbar: false,//不现实滚动条
      title: "配置修改", //不显示标题
      area: ['40%', '45%'],
      content: "<div style='display:flex;justify-content:center;'>" +
              "<textarea id='configValueUp' style='width:80%;height:60px;margin-top: 8px'>"+configValue+"</textarea>" +
              "</div>",
      btn: ['确定', '取消'] ,//只是为了演示
      btnAlign:'c',
      yes: function(){
        $.ajax({
          type:"post",
          url:"${path}/sys/config/update",
          dataType:"json",
          data:{configKey:configKey,configValue:$("#configValueUp").val(),type:1},
          success:function(data){
            if(data.code ==0){
              layer.alert(data.msg,{icon:1}, function(){
                location.reload();
              });
            }else{
              layer.alert(data.msg,{icon:2});
            }
          },
          error:function (data) {
            layer.close(index);
          }
        });
      },
    });
  }


</script>
</body>
</html>
